<template>
  <el-header>
  <el-menu
	  			class="top-bar"
				  mode="horizontal"
				  background-color="#545c64"
				  text-color="#fff"
				  active-text-color="#ffd04b">
				  	<el-menu-item class="navbar-brand" index="0">{{title}}
              <a style="margin-left:20px" class="iconfont el-liebiao" @click="collapseMenu"></a>
            </el-menu-item>
					  <el-menu-item index="3"><a href="/">退出</a></el-menu-item>
					  <el-menu-item index="1">{{userName}} </el-menu-item>
				</el-menu>
    </el-header>
</template>
<script>
  export default{
      name:"main-header",
      data(){
        return {
             title:"后台管理系统",
             userName:this.$store.state.user.userId
        }
      },
      methods:{
        collapseMenu(){ /*侧边栏收缩*/
          this.$store.dispatch("setCollapse");
        }
      }
  }
</script>
